<template>
  <NstdTabs
    v-model="activeName"
    type="card"
    class="demo-tabs"
    @tab-click="handleClick"
  >
    <NstdTabPane label="User" name="first">User</NstdTabPane>
    <NstdTabPane label="Config" name="second">Config</NstdTabPane>
    <NstdTabPane label="Role" name="third">Role</NstdTabPane>
    <NstdTabPane label="Task" name="fourth">Task</NstdTabPane>
  </NstdTabs>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'

const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {}
</script>
<style>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>
